<template>
      <el-row :gutter="0">
      <el-col :xs="2" :sm="3" :md="4" :lg="4" :xl="4">
        <div class="hidBoth">郭于</div>
      </el-col>
      <el-col :xs="20" :sm="18" :md="16" :lg="16" :xl="16">
  <div>
  <div class="Home_1">
  <h2>小金库 您的商品管理助手</h2>
  <p>能够实现商品的录入和删除</p>
  <p>是您商品管理的最佳搭档</p>
  </div>

  <div class="Home_2">
  <el-row :gutter="20">
  <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
    <div class="itemCard">
      <h2>小金库介绍</h2>
      <div class="cardContent">
        <ul>
          <li>小金库 是一个简单的商品管理工具</li>
          <li>基于element-ui 组件库</li>
          <li>数据保存在本地 localStorage 中</li>
          <li>充分保护您的数据隐私和安全性</li>
          <li>当前版本 v1.0</li>
        </ul>
      </div>
    </div>
  </el-col>

  <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
    <div class="itemCard">      
      <h2>小金库 特点</h2>
      <div class="cardContent">
        <ul>
          <li>轻量级</li>
          <li>简洁直爽</li>
          <li>无广告，也恰不到 <span class="emoji">(。•ˇ‸•。)</span> </li>
          <li>充分保护您的数据隐私和安全性</li>
        </ul>
      </div>
      </div>
  </el-col>

  <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
    <div class="itemCard">
      <h2>小金库 技术</h2>
      <div class="cardContent">
        <ul>
          <li>webpack</li>
          <li>element-ui 组件库</li>
          <li>less</li>
          <li>Vue2.0</li>
          <li>vuecli3</li>
          <li>git</li>
        </ul>
      </div>      
    </div>
  </el-col>
  </el-row>
  </div> 
  </div>
        </el-col>
      <el-col :xs="2" :sm="3" :md="4" :lg="4" :xl="4">
        <div class="hidBoth">郭于</div>
      </el-col>
      </el-row >
</template>

<script>
export default {
  components: {
  },
};
</script>

<style lang="less" scope>
  .emoji {
    margin-left: .7rem;
  }
  .Home_1 {
    margin-top: 1.3rem;
    margin-bottom: .3rem;
    padding: .8rem;
    line-height: 22px;
    border-left: .3rem solid#ffd04b;
    border-radius: 0 .1rem .1rem 0;
    background-color: #f2f2f2;
    p {
    display: block;
    margin-block-start: 1rem;
    margin-block-end: 1rem;
    margin-inline-start: 0rem;
    margin-inline-end: 0rem;
      }
  }

  .Home_2 {
    margin-top: 1.3rem;
    margin-bottom: 2.3rem;
    border-radius: 0 .1rem .1rem 0;
            
    .itemCard {
    margin-bottom: .3rem;
    height: 17rem;
    background-color: #ffffff;
    padding: .8rem;

    h2 {
    margin-bottom: 1.5rem;
    font-weight: 500;
    }
    .cardContent {
    border-top: .2rem solid rgb(240, 239, 237);
    li {
    margin-top: .5rem;
    margin-bottom: 1rem;
    }
}
    }
  }
</style>
